<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>后台管理</title>

    <link href="__STATIC__/admin/css/bootstrap.min.css" rel="stylesheet">
    <link href="__STATIC__/admin/font-awesome/css/font-awesome.css" rel="stylesheet">

    <link href="__STATIC__/admin/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/admin/css/style.css" rel="stylesheet">

</head>

<body class="gray-bg">

<div class="middle-box text-center loginscreen animated fadeInDown">
    <div>
        <div>

            <h1 class="logo-name">HPP</h1>

        </div>
        <h3>Welcome to HPP Admin</h3>
        <form class="m-t" role="form" id="form" action="index.html">
            <div class="form-group">
                <input type="email" name="email" class="form-control" placeholder="邮箱" autocomplete="off" required="">
            </div>
            <div class="form-group">
                <input type="password" name="password" class="form-control" placeholder="密码" required="">
            </div>
            <div class="form-group">
                <input type="text" autocomplete="off" name="code" style="width: 180px;float: left;" class="form-control" placeholder="验证码" required="">
                <img onclick="verify(this)" style="height:33px;margin-left: 5px;" src="/admin/verify" alt="captcha" />
            </div>
            <button data-style="zoom-in" type="button" class="ladda-button btn btn-primary block full-width m-b login-btn">登录</button>
            <button type="button" class=" btn btn-primary block full-width m-b wx-btn">微信登录</button>
            <div class="alert alert-danger hide error-info "></div>
            <div class="alert alert-success hide  success-info "></div>
        </form>
    </div>
</div>

<!-- Mainly scripts -->
<script src="__STATIC__/admin/js/jquery-3.1.1.min.js"></script>
<script src="__STATIC__/admin/js/bootstrap.min.js"></script>
<script>
    function verify(obj){
        $(obj).attr('src','');
        $(obj).attr('src','/admin/verify?code='+Math.random());
    }
    $('input').blur(function(){
        if ($(this).val() == '') {
            $(this).parent().addClass('has-error');
        }else{
            $(this).parent().removeClass('has-error');
        }
    });
    $('.wx-btn').click(function(){
        window.location.href = '/wxlogin';
    });
    $('.login-btn').click(function(){
        $.post('/admin/do',$('input').serialize(),function(res){
            console.log(res);
            if(res.code==0){
                $('.error-info').removeClass('hide').text(res.msg);
                if(res.data){
                    $('input[name="'+res.data+'"]').focus().parent('div.form-group').addClass('has-error');
                }
                $('img').attr('src','/admin/verify?code='+Math.random());
            }else{

                $('.error-info').addClass('hide').text('');
                $('.success-info').removeClass('hide').text('登录成功，2秒后跳转');
                setTimeout( () => {
                    window.location.href = res.data;
                } , 2000 )
            }
        },'json');
    });
    // 回车提交
    document.onkeydown = function(event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13){
            $('.login-btn').click();
        }
    }
</script>
</body>

</html>